<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">

    <el-button
      type="warning"
      class="top"
      @click="openDialog('添加列表')"
    >新增模板</el-button>

    <!-- :data="tableData" -->
    <el-table
      :data="list"
      stripe
      style="width: 100%"
      class="box"
    >
      <el-table-column
        prop="templateType"
        label="模板类型"
        width="180"
      >
        <template #default="{row}">
          {{ templateFn(row.templateType) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="transportType"
        label="运送类型"
        width="180"
      >
        <template #default="{row}">
          {{ transportTypeFn(row.transportType) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="associatedCityList"
        label="关联城市"
      >
        <template #default="{row}">
          {{ associatedCityListFn(row.associatedCityList) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="firstWeight"
        label="首重"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="continuousWeight"
        label="续重"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="lightThrowingCoefficient"
        label="轻抛系数"
        width="180"
      >
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template
          #default="{row}"
        >
          <el-button
            type="text"
            size="small"
            class="btn"
            @click="openDialog('编辑模板',row)"
          >编辑</el-button>
          <el-button
            type="text"
            size="small"
            class="btns"
            @click="freightManageDel(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <freightAdd
      ref="son"
      :show-dialog.sync="showDialog"
      :title="title"
    ></freightAdd>
  </div>
</template>

<script>
import freightAdd from './components/freight-add.vue'
import { freightManageList, freightManageDelete } from '@/api/transit'
import EnumObj from '@/api/freightManage'
export default {
  components: {
    freightAdd
  },
  data() {
    return {
      list: [],
      templateType: EnumObj.templateType,
      transportType: EnumObj.transportType,
      associatedCityList: EnumObj.associatedCityList,
      // 弹窗关闭状态
      showDialog: false,
      title: ''
    }
  },
  created() {
    this.freightManage()
  },
  methods: {
    /**
     *
     * 删除
     */
    freightManageDel(id) {
      this.$confirm('您确定要删除吗', '温馨提示').then(async () => {
        // 调用删除接口
        await freightManageDelete(id)
        // 删除成功提示
        this.$message.success('删除成功')
        // 重新渲染页面
        this.freightManage()
      }).catch(() => {})
    },
    /**
     * 打开弹窗
     */
    openDialog(type, row) {
      this.title = type

      if (type === '添加列表') {
        //
      }
      if (type === '编辑模板') {
        // 回显数据筛选
        const obj = this.list.filter(e => e.id === row.id)
        if (obj[0].associatedCityList[0] !== '1') {
          this.$refs.son.associateds = false
        } else {
          this.$refs.son.associateds = true
        }
        this.$refs.son.form = JSON.parse(JSON.stringify(obj[0]))
      }
      // 打开弹窗
      this.showDialog = true
    },
    /**
     * 关联城市转换
     */
    associatedCityListFn(val) {
      const res = EnumObj.associatedCityList.filter(item => val.includes(item.id))
      return res.map(e => e.value).join('、')
    },
    /**
     * 运送类型转换
     */
    transportTypeFn(val) {
      const res = EnumObj.transportType.find(item => item.id === val)
      return res.value
    },
    /**
     * 模板类型转换
     */
    templateFn(val) {
      const res = EnumObj.templateType.find(item => item.id === val)
      return res.value
    },
    // 渲染列表
    async freightManage() {
      // 调用接口
      const { data } = await freightManageList()
      this.list = [...data]
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  background: #ffffff;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
  .el-dialog__wrapper {
    /deep/ .el-dialog__body {
      padding-left: 0px;
    }
  }
  .top{
    margin-top: 30px;
    // margin-left: 30px;
    margin-bottom: 20px;
  }
  .btn{
    margin-left: -160px;
  }
  .btns{
    color: red;
  }
}
</style>
